<template>
  <view-page>
    <!-- <HeaderView /> -->
    <BannerView />
    <div class="explan">
      <div class="title">
        我们提供 <span class="highlight">528</span> 项检测分析服务
      </div>
      <div class="desc">您可以在24个实验室中选择更适合您的实验室</div>
    </div>
    <div class="stat">
      <div class="search">
        <div class="icon left">
          <span class="material-symbols-outlined"> search </span>
        </div>
        <div class="input-wrapper">
          <van-field
            v-model="searchValue"
            placeholder="查询分析项目"
          ></van-field>
        </div>
        <div class="icon right" @click="$router.push('/mobile/device-project')">
          <span class="material-symbols-outlined"> format_line_spacing </span>
        </div>
      </div>
      <div class="local-warp">
        <div class="local-stat" v-for="item in statData" v-bind:key="item.id">
          <span class="count">{{ item.count }}</span>
          <span class="local">{{ item.local }}</span>
        </div>
      </div>
    </div>
    <ListCard />
    <div class="explan h39">
      <div class="title">
        我们提供 <span class="highlight">386</span> 台专业设备<br />
        在线预约服务
      </div>
      <div class="desc w35">
        您可以通过网站设备预约功能随时预约您想使用的检测设备
      </div>
    </div>
    <div class="analysis-equ-swiper">
      <EquList />
    </div>
    <HeartView />
    <ProblemView />
    <CardView />
    <FooterView />
  </view-page>
</template>

<script>
import EquList from './EquList.vue'
import HeartView from './HeartView.vue'
import BannerView from './BannerView.vue'
import ListCard from './ListCard.vue'

import CardView from '@/components/Footer/CardView'
import ProblemView from './ProblemView.vue'
import FooterView from '@/components/Footer/FooterView.vue'
import { ref } from 'vue'
// const emit = defineEmits(['change'])defineProps, toRefs,

export default {
  setup() {
    const statData = ref([
      { local: '北京东院', count: 186, id: 1 },
      { local: '廊坊院区', count: 186, id: 2 },
      { local: '杭州院区', count: 186, id: 3 },
      { local: '西北院区', count: 186, id: 4 },
    ])

    const searchValue = ref('')

    return {
      statData,
      searchValue,
    }
  },
  components: {
    EquList,
    CardView,
    ListCard,
    HeartView,
    FooterView,
    BannerView,
    ProblemView,
  },
}
</script>

<style scoped lang="scss">
.explan {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: dpi(31rem);
  &.h39 {
    height: dpi(39rem);
  }
  .title {
    margin-top: dpi(9rem);
    margin-bottom: dpi(4rem);
    font-family: PingFangSC-Semibold;
    font-size: dpi(4rem);
    font-weight: normal;
    letter-spacing: 0rem;
    color: #05204d;
    text-align: center;
    .highlight {
      color: #ff0000;
    }
  }
  .desc {
    text-align: center;
    margin-bottom: dpi(7rem);
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    font-weight: normal;
    font-stretch: normal;
    // line-height: dpi(2rem);
    letter-spacing: 0rem;
    color: #888888;
    &.w35 {
      width: dpi(35rem);
    }
  }
}

.stat {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: dpi(74rem);
  background-color: #0571b0;
  background-image: url('@/assets/images/equ-bg-4.jpg');
  background-size: cover;
  background-position: center;
  &::after,
  &::before {
    display: block;
    position: absolute;
    background-color: #05204d;
    opacity: 0.5;
    content: '';
  }
  &::after {
    width: dpi(50rem);
    height: 1px;
    left: 50%;
    top: 50%;
    margin-left: -#{dpi(25rem)};
  }
  &::before {
    width: 1px;
    height: dpi(50rem);
    left: 50%;
    top: 50%;
    margin-top: -#{dpi(25rem)};
  }
  .search {
    position: absolute;
    top: dpi(-5.5rem);
    left: dpi(2rem);
    right: dpi(2rem);
    height: dpi(11rem);
    background: #ffffff;
    box-shadow: 0rem 1rem 2rem 0rem rgba(5, 32, 77, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-around;
    .input-wrapper {
      width: calc(100% - dpi(20rem));
      ::v-deep {
        input {
          text-align: center !important;
        }
      }
    }
    .icon {
      position: absolute;
      @include addwh(5rem);
      top: 50%;
      margin-top: dpi(-2.1rem);
      > span {
        font-size: dpi(4.2rem);
        color: #05204d;
      }
      &.left {
        left: dpi(4.2rem);
      }
      &.right {
        right: dpi(4.2rem);
      }
    }
  }
  .local-warp {
    display: flex;
    flex-wrap: wrap;
    width: dpi(50rem);
    color: #fff;
    .local-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      @include addwh(25rem);
      font-family: PingFangSC-Regular;
      .count {
        margin-bottom: dpi(4rem);
        font-size: dpi(6rem);
        line-height: dpi(6rem);
      }
      .local {
        font-size: dpi(2rem);
      }
    }
  }
}
</style>
